<template>
  <div class="shop-cart-area">
    <!-- 头部栏 -->
    <div class="top-nav-area pad-l-14" :style="{background: '#FFF',paddingTop: statusBarTop+'px',height: divH+'px',paddingBottom:'10px'}">
      <span class="font-24 font-color">购物车</span>
      <span class="font-color-6 mar-l-12">共{{number}}件商品</span>
    </div>
    <div :style="{top: areaTop+ 'px' }" class="select-address-box">
      <!-- 地址 -->
      <div class="flex flex-between pad-t-15 pad-l-12 pad-r-12">
        <div @click="goAddressList" class="flex">
          <span class="font-color-6 font-13" v-text="address ? '送至: '+address : '点击设置收货地址'"></span>
          <van-icon name="arrow" class="mar-l-4"/>
        </div>
        <div @click="editGoods" v-text="isEditBtn ? '编辑' : '完成'"></div>
      </div>
      <!-- tab -->
      <div v-if="enterpriseConfig.groupBuyAuthority || enterpriseConfig.storeHomeAuthority" class="pad-l-12 pad-r-11 tab-box">
        <ul class="flex font-color-3">
          <li v-for="(item, index) of tabBtnList" :key="index" @click="changeTabEvent(index)" class="width-88 text-align-c height-per-100 flex flex-center" :class="index===tabBtnIndex? 'tab-active':''">
            {{item.text}}
          </li>
        </ul>
      </div>
    </div>
    <div
      class="list-area"
      :style="{marginTop: (!enterpriseConfig.groupBuyAuthority && !enterpriseConfig.storeHomeAuthority) ? (areaTop + 50) + 'px':(areaTop + 110) + 'px'  }">
      <!-- 购物车暂时去除 社区团购、门店到家业务 -->
      <logistics-type ref="childTwo" @getGoodsNumber='getGoodsNumber'></logistics-type>
    </div>
  </div>
</template>

<script>
import LogisticsType from './components/LogisticsType.vue'
import { getByEnterpriseId } from '@/api/personal'
import { listAddress, getAddress } from '@/api/address'
import { getDeliveryType } from '@/api/shop'
// import {setMemberId} from '@/utils/auth'
export default {
  components: {
    LogisticsType
  },
  data() {
    return {
      statusBarHeight: '',
      spaceBarHeight: '',
      barHeight: '',
      statusBarTop: '',
      divH: '',
      areaTop: '',
      enterpriseConfig: {
        groupBuyAuthority: '', // 社区团购增值功能 0关闭 1开启
        storeHomeAuthority: '', // 门店到家增值功能 0关闭 1开启
        communityDistributionAuthority: '' // 社群分销增值功能 0关闭 1开启
      },
      address: '', // 送达地址信息
      isEditBtn: true,
      number: 0, // 共几件商品
      // test: {1: '快递发货', 3: '社区团购', 4: '到家自提', 5: '配送到家'},
      tabBtnList: [],
      tabBtnIndex: 0,
      listType: 0
    }
  },
  mounted() {
    this.init()
    this.getDeliveryTypeEls()
  },
  onLoad() {
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.init()
    this.getDeliveryTypeEls()
    if (this.$pt.getStorageSync('addressId')) {
      this.addressGetEls(this.$pt.getStorageSync('addressId'))
    }
    // 确认订单页进入切换自提点页面
    if (this.$pt.getStorageSync('siteMemberId')) {
      this.$pt.removeStorageSync('siteMemberId')
    }
  },
  methods: {
    init() {
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      // 获取胶囊按钮信息
      let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
      // 设备信息
      let devInfo = this.$pt.getSystemInfoSync()
      // 整个导航栏高度
      this.spaceBarHeight = devInfo['statusBarHeight'] + menuButtonInfo['height'] + (menuButtonInfo['top'] - devInfo['statusBarHeight']) * 2
      this.barHeight = this.statusBarHeight - 2
      this.statusBarTop = this.statusBarHeight - 42
      this.divH = menuButtonInfo['height']
      this.areaTop = this.statusBarTop * 1 + this.divH * 1
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') === -1) {
        // android类型
        this.statusBarTop = this.statusBarHeight - 40
        // this.spaceBarHeight = this.statusBarHeight + 36
        this.barHeight = this.statusBarHeight - 4
      }
      if (this.getCustomerId) {
        // 获取收货地址
        this.listAddress()
      }
      // 获取增值功能信息
      this.getByEnterpriseId()
    },
    getDeliveryTypeEls() {
      getDeliveryType({memberId: this.getMemberId}).then(res => {
        this.tabBtnList = []
        let tempKeys = Object.keys(res.data).sort((a, b) => b - a)
        tempKeys.forEach(item => {
          this.tabBtnList.push({type: Number(item), text: res.data[item]})
        })
        this.listType = this.listType !== 0 ? this.listType : Number(this.tabBtnList[0]['type'])
      })
    },
    getByEnterpriseId() {
      getByEnterpriseId({enterpriseId: this.getEnterpriseId}).then(res => {
        if (res.isError) return
        this.enterpriseConfig.groupBuyAuthority = res.data.groupBuyAuthority
        this.enterpriseConfig.storeHomeAuthority = res.data.storeHomeAuthority
        this.enterpriseConfig.communityDistributionAuthority = res.data.communityDistributionAuthority
      }).catch(err => {
        console.log(err)
      })
    },
    getGoodsNumber(res) {
      this.number = res
    },
    changeEditBtnText() {
      this.isEditBtn = true
    },
    // 点击编辑按钮
    editGoods() {
      if (this.number) {
        this.isEditBtn = !this.isEditBtn
        this.$refs.childTwo.editGoods(this.isEditBtn)
      } else {
        this.$utils.showToast({ title: '没有可编辑的商品' })
      }
    },
    // 跳转到 地址列表页
    goAddressList() {
      this.$pt.navigateTo({
        url: '/pages/personal/address/main'
      })
    },
    // 获取默认地址
    listAddress() {
      let dataMemberId = !this.getShowBuyCard ? this.getMemberId : this.getCustomerId
      listAddress({
        memberId: dataMemberId
      }).then((response) => {
        if (response.isError) return
        let addressInfo = response.data.filter((item) => {
          return item.defaultFlag === 1
        })
        this.address = `${addressInfo[0].address}`
        this.address = this.address.length > 8 ? `${this.address.replace(/\s*/g, '').substring(0, 8)}...` : this.address
      }).catch(() => {
      })
    },
    // 获取地址列表信息
    addressGetEls(addressId) {
      console.log('获取地址列表信息')
      getAddress(addressId).then((response) => {
        if (response.isError) return
        this.address = response.data.address
        this.address = this.address.length > 8 ? `${this.address.replace(/\s*/g, '').substring(0, 8)}...` : this.address
      }).catch(() => {
      })
    },
    // 切换商品类型 tab
    changeTabEvent(index) {
      if (index === this.tabBtnIndex) return
      this.$pt.showLoading()
      this.tabBtnIndex = index
      this.listType = this.tabBtnList[index]['type']
      this.$pt.hideLoading()
    }
  }
}
</script>

<style scoped lang="less">
  .shop-cart-area {
    .top-nav-area {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 999;
    }
    .list-area {
      margin-top: 14.5px;
      padding-bottom: 100px;
    }
  }
  .select-address-box {
    position: fixed;
    width: 100%;
    background: #FFF;
    box-sizing: border-box;
    z-index: 1;
    .tab-box {
      padding-top: 12px;
      padding-bottom: 11.5px;
      ul {
        height: 33px;
        background: #F5F5F5;
        border-radius: 10px;
        .tab-active {
          background: #FF243D;
          border-radius: 10px;
          color: #fff;
        }
      }
    }
  }
</style>